<template>
	<view class="page">
		<view class="top-userinfo">
			<image class="bg-image" mode="aspectFill" src="/static/images/cmybg@2x.png"></image>

			<view class="position" @click="selectCity()">
				<image class="position-icon" src="/static/images/ic_position.png"></image>
				<view>{{ user.cityName || '暂无' }}</view>
				<image class="pull-down" src="/static/images/drop-downhs@3x.png"></image>
			</view>
			<view class="user-info" @click="to('./information')">
				<image class="avatar" :src="user.photo ? user.photo : '/static/images/ic_img.png'" mode="aspectFill"></image>
				<view class="right-info">
					<view>
						<text class="username">{{ user.name }}</text>
						<image class="more-icon" src="/static/images/ic_next.png"></image>
					</view>
					<view class="phone-num">{{ hidePhone(user.phone) }}</view>
				</view>
			</view>
			<!-- <view class="pull-down-btn" @click="chooseStatus">
				<view class="text">{{ optionValue }}</view>
				<image v-if="!isShow" class="icon" src="/static/images/ic_drops.png"></image>
				<image v-else class="icon1" src="/static/images/shangla.png"></image>
			</view> -->
			<view v-show="isShow" class="ep-select-content-wrap">
				<scroll-view class="ep-select-content" :scroll-y="true">
					<view v-for="(item, index) in options" :key="index" class="option-item" @click="itemClick(item, index)">{{ item }}</view>
					<view v-if="options.length == 0" class="empty-text">暂无数据</view>
				</scroll-view>
				<text class="triangle"></text>
			</view>
		</view>
		<view class="tool-list">
			<view class="tool-item">
				<view>{{ user.todayIncome || 0 }}</view>
				<view class="text">本日收入</view>
			</view>
			<view class="tool-item">
				<view>{{ user.toBeServedQuantity || 0 }}</view>
				<view class="text">待服务</view>
			</view>
			<view class="tool-item">
				<view>{{ user.completedQuantity || 0 }}</view>
				<view class="text">已完成</view>
			</view>
			<view class="tool-item" @click="goPage">
				<view>{{ user.theCaseQuantity || 0 }}</view>
				<view class="text">我的案例</view>
			</view>
		</view>

		<view class="commonly-utensil">
			<view class="title">常用工具</view>
			<view class="utensil-list">
				<view class="utensil-item" v-for="(item, index) in toolsGrid" :key="index" @click.stop="to(item.page)">
					<!-- #ifdef MP-WEIXIN -->
					<button v-if="index === 2" open-type="contact" class="have-path">
						<image :src="item.icon" mode="aspectFit"></image>
						<view>{{ item.name }}</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view v-if="index === 2" class="have-path" @click="customer">
						<image :src="item.icon" mode="aspectFit"></image>
						<view>{{ item.name }}</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view v-if="index === 2" class="have-path" @click="HCustomer">
						<image :src="item.icon" mode="aspectFit"></image>
						<view>{{ item.name }}</view>
					</view>
					<!-- #endif -->
					<view v-else-if="index == 6 && user.isDispatch == 1" class="have-path">
						<image :src="item.icon" mode="aspectFit"></image>
						<view>{{ item.name }}</view>
					</view>
					<view v-if="index !== 6 && index !== 2" class="have-path">
						<image :src="item.icon" mode="aspectFit"></image>
						<view>{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<simple-address ref="simpleAddress" :hideColumn="2" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></simple-address>
		<!-- 底部自定义tab栏 -->
		<view class="fixed-bottom">
			<view @click="toIndex">
				<image class="tab-icon" src="/static/tabs/nav_three.png"></image>
				<view class="tab-text" style="color: #A3A1A1;">首页</view>
			</view>
			<view>
				<image class="tab-icon" src="/static/tabs/nav_five_active.png"></image>
				<view class="tab-text" style="color: #32C59A;">个人中心</view>
			</view>
		</view>
		<code-popup ref="popup"></code-popup>
	</view>
</template>

<script>
import { getLocation, reverseGeocoder } from '@/components/public.js';
import { getEscortInfo, updateStatus } from '@/apis/request.js';
import CodePopup from '@/components/codePopup.vue';
export default {
	components: {
		CodePopup
	},
	data() {
		return {
			toolsGrid: [
				{
					icon: '/static/images/wwallet@2x.png',
					name: '我的钱包',
					page: '/pages/attendantPages/purse'
				},
				{
					icon: '/static/images/statisticsope@2x.png',
					name: '订单统计',
					page: '/pages/attendantPages/orderStats'
				},
				{
					icon: '/static/images/myservice@2x.png',
					name: '在线客服',
					page: ''
				},
				{
					icon: '/static/images/helpzx@2x.png',
					name: '帮助中心',
					page: '/pages/MinePages/helpCenter/helpCenter'
				},
				{
					icon: '/static/images/applyfk@2x.png',
					name: '应用反馈',
					page: '/pages/MinePages/feedback/main'
				},
				{
					icon: '/static/images/setupsz@2x.png',
					name: '预约设置',
					page: '/pages/attendantPages/setting'
				},
				{
					icon: '/static/images/lrdzhistory.png',
					name: '派单管理',
					page: '/pages/attendantPages/dispatch'
				}
			],
			select: '',
			options: ['可接单', '休息'],
			optionValue: '可接单',
			isShow: false,
			user: {},
			cityPickerValueDefault: [0, 0, 0],
			sweixin: null
		};
	},
	onShow() {
		this.userInfo();
	},
	methods: {
		HCustomer() {
			this.$refs.popup.show = true;
		},
		//获取陪诊师信息
		userInfo() {
			getEscortInfo().then(res => {
				this.user = res;
				if (res.status == 0) {
					this.optionValue = '休息';
				} else {
					this.optionValue = '可接单';
				}
			});
		},
		to(url) {
			uni.navigateTo({
				url
			});
		},
		toIndex() {
			uni.redirectTo({
				url: '/pages/attendantPages/index'
			});
		},
		//选择城市
		selectCity() {
			this.$refs.simpleAddress.open();
		},
		onConfirm(e) {
			this.user.provinceName = e.labelArr[0];
			this.user.provinceId = e.provinceCode;
			this.user.cityName = e.labelArr[1];
			this.user.cityId = e.cityCode;
			this.user.areaName = e.labelArr[2];
			this.user.areaId = e.areaCode;
			let that = this;
			this.$api.http(
				'/escort/info/updateEscortInfo',
				'POST',
				this.user,
				res => {
					that.userInfo();
				},
				err => {}
			);
		},
		//选择接单的状态
		itemClick(item, index) {
			this.optionValue = item;
			this.isShow = false;
			updateStatus().then(res => {
				this.$Toast('接单状态切换成功');
			});
		},
		//选择接单
		chooseStatus() {
			this.isShow = !this.isShow;
		},
		hidePhone(phone) {
			if (phone) {
				return phone.substring(0, 3) + '****' + phone.substring(7);
			} else {
				return '';
			}
		},
		//我的案例
		goPage() {
			uni.navigateTo({
				url: './myCase?id=' + this.user.id
			});
		},
		/**
		 * 定位当前城市
		 */
		location() {
			getLocation().then(res => {
				reverseGeocoder(res.latitude, res.longitude, city => {
					this.city = city;
				});
			});
		},
		customer() {
			this.sweixin.launchMiniProgram({
				id: 'gh_40c57493134e' //要跳转小程序的原始ID
			});
		},
		getPlus() {
			//获取当前显示的webview
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			var currentWebview = page.$getAppWebview();
			//调用H5+APP的扩展API
			var shares = null;
			let that = this;
			var pusher = plus.share.getServices(
				function(s) {
					shares = {};
					for (var i in s) {
						var t = s[i];
						shares[t.id] = t;
					}
					that.sweixin = shares['weixin'];
				},
				function(e) {
					console.log('获取分享服务列表失败：' + e.message);
				}
			);
			//放入当前的webview
			currentWebview.append(pusher);
		},
		close() {
			this.show = false;
		}
	},
	onLoad() {
		this.location();
		// #ifdef APP-PLUS
		this.getPlus();
		// #endif
	}
};
</script>

<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;

	.top-userinfo {
		width: 750rpx;
		height: 500rpx;
		box-sizing: border-box;

		.bg-image {
			width: 100%;
			height: 100%;
			z-index: 0;
		}

		.position {
			display: flex;
			align-items: center;
			position: absolute;
			top: 90rpx;
			left: 30rpx;

			.position-icon {
				width: 22rpx;
				height: 28rpx;
			}

			view {
				font-size: 28rpx;
				margin: 0 10rpx;
			}

			.pull-down {
				width: 14rpx;
				height: 8rpx;
			}
		}

		.user-info {
			position: absolute;
			top: 170rpx;
			left: 34rpx;
			display: flex;
			align-items: center;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.right-info {
				.username {
					font-size: 34rpx;
					font-weight: bold;
				}

				.more-icon {
					height: 28rpx;
					width: 18rpx;
					margin-left: 10rpx;
				}

				.phone-num {
					margin-top: 8rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}

		.pull-down-btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: absolute;
			right: 30rpx;
			top: 184rpx;
			border: 2rpx solid #dcdcdc;
			width: 240rpx;
			height: 60;
			line-height: 60rpx;
			text-align: center;
			border-radius: 34rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			background-color: #fff;

			.text {
				margin-right: 10rpx;
				font-size: 28rpx;
			}

			.icon {
				width: 24rpx;
				height: 14rpx;
			}

			.icon1 {
				width: 24rpx;
				height: 20rpx;
			}
		}
	}

	.tool-list {
		margin-top: -190rpx;
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		padding: 0 30rpx;
		z-index: 2;

		.tool-item {
			font-size: 34rpx;
			color: #020202;

			.text {
				color: #333333;
				font-size: 28rpx;
			}
		}
	}

	.commonly-utensil {
		position: relative;
		width: 690rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin: 40rpx auto 0 auto;
		box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

		.title {
			padding: 30rpx;
			border-bottom: 2rpx solid #ededed;
		}

		.utensil-list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 12rpx 20rpx 20rpx 20rpx;

			.utensil-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 160upx;
				padding: 20upx 0;

				.have-path {
					text-align: center;

					image {
						width: 46upx;
						height: 46upx;
					}

					view {
						// margin-top: 4rpx;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}

	.fixed-bottom {
		box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		height: 102rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		background-color: #fff;

		.tab-icon {
			height: 42rpx;
			width: 44rpx;
		}

		.tab-text {
			font-size: 22rpx;
		}
	}
}

.ep-select-content-wrap {
	width: 230rpx;
	position: absolute;
	top: 125px;
	right: 36rpx;
	z-index: 9999;
	padding-top: 6px;

	.ep-select-content {
		background-color: #fff;
		padding: 8px 0;
		box-sizing: border-box;
		font-size: 14px;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		border-radius: 5px;
		max-height: 181px;

		.option-item {
			padding: 8px 18px;
			cursor: pointer;

			&:hover {
				background-color: #f5f7fa;
			}
		}

		.active {
			color: #007aff;
		}

		.disabled {
			color: #c0c4cc;

			&:hover {
				background-color: #f5f7fa;
			}
		}
	}
}

/deep/ .u-back-text {
	min-width: 70rpx;
}

button::after {
	border: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	line-height: 1.35;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	background-color: #fff;
}
</style>
